{% extends "base.html" %}
{% load i18n %}
{% load shop_tags %}
{% block title %}{{ product.title }}{% endblock %}

{% block scripts %}
    <!-- plugin Rater -->
    <link type="text/css" rel="stylesheet" href="{{ MEDIA_URL }}js/jquery.simple.rater/jquery.simple.rater.css">
	<script src="{{ MEDIA_URL }}js/jquery.simple.rater/jquery.simple.rater.js" type="text/javascript"></script>
	<!-- plugin Fancybox -->
	<script type="text/javascript" src="{{ MEDIA_URL }}js/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/fancybox/jquery.fancybox-1.3.1.css" media="screen" />
    <!-- usage -->
	<script type="text/javascript">
		$().ready(function(){
			// Vote parameters
			$('#vote').rater({
		      url: '/vote/{{ product.id }}/',
		      mediapath: '{{ MEDIA_URL }}js/jquery.simple.rater/',
		      value: {{ product.rating }}
	    	});
			//Cost option change
			$('.cost_change').change(function() {
				var value = $(".cost_change option:selected").val()
				$(".cost").addClass('hidden');
				$('#cost_'+value).removeClass('hidden');
				
			  	//alert('Handler for .change() called.'+value);
			});
			//Image hover
			$('.product_img').hover(function() {
				var thumb = $(this).find("img").attr('src');
				var cover = thumb.replace('.thumbnail.', '.cover.'); 
				var alt = $(this).find("img").attr('alt');
				var original = $(this).find("a").attr('href');
				//$(this).find("a").attr('rel','');
				$('.cover').find('img').attr('src', cover).attr('alt', alt);
				$('.cover').find('a').attr('href', original);
				//alert(link);
			});
			//Fancybox
			$("a[rel=group]").fancybox({
				'transitionIn'	: 'elastic',
				'transitionOut'	: 'elastic',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
		});
	</script>
{% endblock %}

{% block content %}
	<div class="breadcump">
	{% for category_list in categories %}
		{% for category in category_list %}
			<a href="{% url shop.views.listing category.id %}">{{ category.title }}</a> {% if not forloop.last %}->{% endif %}
		{% endfor %}
		{% if not forloop.last %},{% endif %}
	{% empty %}
		{% trans "All products" %}
	{% endfor %}
	</div>
    <h2 class='title'>{{ product.title }}</h2>
	<div id="vote">
		<ul class="rating star_5">
			<li class="s_1"><span>0</span></li>
			<li class="s_2"><span>1</span></li>
			<li class="s_3"><span>2</span></li>
			<li class="s_4"><span>3</span></li>
			<li class="s_5"><span>4</span></li>
			<li class="indicator" style="display: none;"><img alt="loading" src="{{ MEDIA_URL }}js/jquery.simple.rater/indicator.gif"></li>
		</ul>
	</div>
	<div class="costs">
		{% for option in costs %}
			<div class="cost {% if not forloop.first %}hidden{% endif %}" id="cost_{{ option.id }}">
				{% trans "Cost" %}:{{ option.cost }}
				{% if option.old_cost %}<div class='old_cost'>{{ option.old_cost }}</div>{% endif %}
			</div>
		{% endfor %}
		<form action="{% url shop.views.add_to_cart %}" method="post">
			<select class="{%ifequal costs.count 1 %}hidden{% endifequal %} cost_change" name="cost">
				{% for option in costs %}
						<option value="{{ option.id }}" {% if forloop.first %}selected{% endif %}>
							{{ option.title }}
						</option>
				{% endfor %}
			</select>
		<input type="submit" class="add-to-cart" value="{% trans "Add to cart" %}">
		</form>
	</div>
	<div class="images">
	{% if images %}
		<div class="cover">
			<a class="product_img_{{ cover.id }}" rel="group" href={{ cover.image.url }}><img alt="{{ cover.title }}" src={{ cover.image.cover.url }} /></a>
		</div>
		<ul class="product_image">
		{% for image in images %}
			<li class="product_img"><a class="product_img_{{ image.id }}" rel="group" href={{ image.image.url }}><img alt="{{ image.title }}" src={{ image.image.thumbnail.url }} /></a></li>
		{% endfor %}
		</ul>
	{% else %}
		<div class="cover"><img src="{{ MEDIA_URL }}product/default.jpeg" /></div>
	{% endif %}
	</div>
	<p class="desc">
		<b>{% trans "Description" %}:</b> {{ product.description }}
	</p>
	<div class="clear"></div>
	
{% endblock %}
{% block sidebar %}	
	{% cart %}
{% endblock %}